<template>
	<view class="">
		<swiper class="swiper" :indicator-dots="true" :autoplay="true" :interval="3000" :duration="1000" v-if="cateObj.category">
			<swiper-item v-for="(item,index) in cateObj.category.bannerUrlList" :key="index">
				<view class="swiper-item">
					<image :src="item" mode=""></image>
				</view>
			</swiper-item>
		</swiper>
		<view class="title">
			{{cateObj.category.frontName}}
		</view>
		<view class="desc">
			{{cateObj.category.frontDesc}}
		</view>
	</view>
</template>

<script>
import request from '../../utils/request.js';
export default {
	name: 'CateList',
	props: ['L1Id'], //接受父页面传值
	data() {
		return {
			cateList: []
		};
	},
	mounted() {
		//获取数据可以使用mounted 或者 created
	},
	created() {
		this.getCateList();
	},
	methods: {
		async getCateList() {
			const res = await request('/getIndexCateData');
			console.log(res);
			this.cateList = res.indexCateData;
		}
	},
	computed: {
		//定义计算属性，获取前端传过来的数组数据，并遍历出来自己需要的内容
		cateObj() {
			return this.cateList.find((item) => item.category.parentId === this.L1Id);
		}
	}
};
</script>

<style lang="stylus">
	.swiper
		.swiper-item
			height: 360rpx
			image
				width: 100%
				height: 360rpx
	.title
		text-align: center
		line-height: 80rpx
		font-size: 40rpx
		color: #333
	.desc
		text-align: center
		font-size: 30rpx
		line-height: 40rpx
		color: #666
</style>
